<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="../js/vue-router.min.js"></script>
    <style>
        .router-link-exact-active,
        .router-link-active {
            background: #f50;
            border: 1px solid darkblue;

        }
    </style>
</head>

<body>
    <div id="app">
        <h1>{{title}} </h1>

        <my-head></my-head>

        <hr>

        <!-- 5.显示路由的出口 -->
        <div style="width: 80%;height:auto;padding: 20px;border: 2px solid brown;">
            <router-view></router-view>
        </div>

        <!-- 声明导航 -->
        <router-link to="/home">首页</router-link>
        <router-link to="/user/2011">用户1</router-link>
        <router-link to="/user/2101">用户1</router-link>
    </div>

    
    <template id="home">
        <div>
            <h3>home --- home --- home</h3>
        </div>
    </template>

    <template id="user">
        <div>
            <h3>user - user - user </h3>
            <p>用户信息</p>
            <p>myuser === {{$route.params.user}}</p>
        </div>
    </template>
</body>

<script>
    //注册全局的组件
    const head = {
        template: "<header>head ---> 学习路由起步</header>"
    }
    Vue.component("myHead", head)

    // 0.如果使用模块化机制编程,导入Vue和VueRouter,要调用Vue.use(VueRouter)

    // 1.定义(路由)组件.组件选项对象
    const Home = {
        template: "#home"
    }

    const User = {
        template: "#user",
        mounted() {
            console.log(this.$route);
        }
    }



    // 2.定义组件和路由的映射
    const routes = [{
            path: '',
            redirect: '/home'
        },
        {
            name: "home",
            path: "/home",
            component: Home
        },
        {
            name: "user",
            path: "/user/:user",
            component: User
        }
    ]


    //3.创建一个 router 实例
    const router = new VueRouter({
        routes
    });


    const vm = new Vue({
        router, //挂载


        data: {
            title: "route 路由起步"
        },
        motheds: {

        },
        mounted() {
            document.querySelectorAll("title")[0].innerHTML = this.title
        }
    }).$mount("#app")
</script>

</html>